// 评论列表组件
<template>
  <!-- 评论区域 -->
  <div class="comment-box">
    <div class="comment-region">
      <div class="region-box" v-for="(item, index) in data" :key="index" :style="indent">
        <van-row type="flex" justify="space-between">
          <van-col>
            <div class="img-box" @click="dot(item)">
              <img
                :src="item.portrait?item.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'"
                width="100%"
                height="100%"
                alt
              >
            </div>
          </van-col>
          <van-col class="van-hairline--bottom" style="width:100%">
            <van-row type="flex" justify="space-between" align="center">
              <van-col>
                <i class="comment-user" @click="toggle(item, index)">
                  {{item.user_name}}
                  <span v-if="item.children">({{item.children.length}}条回复)</span>
                </i>
              </van-col>
              <van-col>
                <i class="comment-num">
                  <i v-if="item.islike==0" class="iconfont icon-dianzan1" @click="give_abulous(item)"></i>
                  <i v-if="item.islike==1" style="color:#01A0EF" class="iconfont icon-dianzan1" @click="over"></i>
                  <span>{{ item.like_nums || 0 }}</span>
                </i>
                <i class="comment-num">
                  <i class="iconfont icon-xiaoxi" @click="post_comment(item)"></i>
                  <span>{{ item.child_sum || 0 }}</span>
                </i>
              </van-col>
            </van-row>
            <p class="date-num">
              <!-- <span class="comment-date">{{ index+1 }}楼</span> -->
              <i class="comment-date">{{ item.create_time }}</i>
            </p>
            <p class="comment-content">
              {{ item.comment_content }}
            </p>
            <div class="img-container" v-if="item.pictures">
              <div class="imge-box" v-for="(it,index) in stringArray(item.pictures)" :key="index">
                <img class="srcimg" :src="fmtImg(it)" @click="seeImg(stringArray(item.pictures),index)">
              </div>
            </div>
            <!-- <i class>
              <p class="reply" @click="post_comment(item)">{{ item.child_sum}}回复</p>
            </i> -->
          </van-col>
        </van-row>
        <tree-menu v-if="scope[index]" :depth="depth + 1" :data="item.children"></tree-menu>
      </div>
    </div>
  </div>
</template>

<script>
import { activity_addLike } from "@/api/activity";
import Nodata from "../../public/nodata/Nodata"; // 导入暂无数据组件
import { clacTime } from "@/utils";
import { setTimeout } from "timers";
import { ImagePreview } from 'vant';

export default {
  // 通过 porps 来接收父组件中传递过来的属性
  name: "tree-menu",
  props: ["data", "depth", "datainfo"],
  components: { Nodata },
  data() {
    return {
      isShow: false,
      isHide: false,
      scope: {},
      listQuery: {}
    };
  },
  computed: {
    indent() {
      return { transform: `translate(${this.depth * 8}px)` };
    }
  },
  methods: {
    seeImg(item,index){
      let imgList = []
      item.forEach(ele => {
        imgList.push(ele)
      });
      ImagePreview({
        images: imgList,
        startPosition: index,
        lazyLoad: false,
        showIndex: false
      });
    },
    dot(item){
         this.$router.push({
             path:'/giveLike',
             query:{id:item.id}
         })
    },
    over() {
      this.$toast("您已经点赞过了不能重复点赞");
    },
    //字符串转换为数组
    stringArray(urlList) {
      let data = urlList.split(',')
      return data
    },
    //点赞
    fmtImg(url) {
      let index = url .lastIndexOf("\/");
      url  = url .substring(index + 1, url .length);
      return localStorage.getItem("oss_public_url") + "/" + url;
    },
    give_abulous(item) {
      this.listQuery = {
        id: item.id,
        active_id: item.active_id,
        company_id: localStorage.getItem("companyId") - 0
      };
      this.oneAbulous();
    },
    async oneAbulous() {
      let query = Object.assign({}, this.listQuery);
      let res = await activity_addLike(query);
      let result = res.data;
      if (result.status == 100) {
        this.$toast.success("点赞成功");
        this.$emit("initList");
      }
    },
    //回复评论
    post_comment(item) {
      this.$emit("initList");
      this.bus.$emit("hidden");
      this.bus.$emit("comminfo", item);
    },
    //展开评论
    toggle(item, index) {
      if (item.children && item.children.length) {
        this.doTask(index);
      }
    },
    doTask(index) {
      this.$set(this.scope, index, !this.scope[index]);
    }
  },
  mounted() {
    this.data.map(item => {
      return Object.assign({}, item, {
        create_time: clacTime(item.create_time)
      });
    });
  }
};
</script>

<style lang="scss" scoped>
@import "Comment";
</style>
